<%-- 
    Document   : index
    Created on : 27/12/2012, 03:17:40 PM
    Author     : TOSHIBA
--%>

<%@page import="recursos.articulo_carrito"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>guatebay</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.5.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Amaranth_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>


	<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="js/ajax-tooltip.js">
	</script>	
	<link rel="stylesheet" href="css/ajax-tooltip.css" media="screen" type="text/css">
	<link rel="stylesheet" href="css/ajax-tooltip-demo.css" media="screen" type="text/css">

</head>
<body>       
<div class="extra">
  <div id="page_3">
    <div class="main">
      <!--header -->
      
      <table width="800" border="1" id="encabezado" > 
      <tr> 
      <td width="600" align="center"><p align="left"> <a target="frame"><img src="images/guatebay_logo.jpg" alt="">      </a>  </p> </td> 
      <td width="800" align="center">
      <br>   
      <span class="date">
        <!-- -->
        </span>
      <p align="right"> Usuario: <input type="text" name="txt1" size="20"> </p>
      <p align="right"> Contraseña: <input type="text" name="txt1" size="20"> </p>
      <p align="right"> <a href="http://www.google.com.gt" target="_self"> <input type="submit" name="boton" value="Iniciar" /> </a> </p>
      <p align="right"> <a href="registro.jsp">Registrarse</a> <a href="">  Recuperar Contraseña</a> </p>  
      </td> 
      </tr>
      </table>
            
          
        
      <header>  
        <br>  

        <nav>
          <ul class="menu">
            <li><a href="#page_2">Catálogo</a></li>
          </ul>
        </nav>
      </header>
      
      
      
      
      <!--header end-->
      <!--content -->
     <%
      ArrayList<articulo_carrito> catalogo = new ArrayList();
      //LLENANDO UN CATALOGO FALSO
      int x=1;
      for (int i=1;i<20;i++){
      
      articulo_carrito articulo= new articulo_carrito();
      articulo.articuloCodigo=i;
      articulo.articuloCategoria=1;
      articulo.articuloDescripcion="Este es el articulo No."+i;
      articulo.articuloNombre="Articulo No"+i;
      articulo.articuloPrecio=Math.round(((i+i)*Math.PI)/2);
      articulo.articuloPuntuacion=Math.abs((((i*i)/3)^6)-(i*2));
      articulo.articuloStatus="no se q es esto";
      articulo.articuloUsuarioid=1;
      articulo.articuloimagen="images/page2_img"+x+".png";
      x++;
      if(x==7){x=1;}
      catalogo.add(articulo);
      }
      session.setAttribute("catalogo",catalogo);
        %>
     
  
     <section class="content">
        <h2>Listado de Productos</h2>
        
        <%
          //PINTANDO EL CATALOGO FALSO
         String col_izq="<article class=\"col1\">",col_der="<article class=\"col1 pad_left1\">";
         boolean izq_der=true;
         for(articulo_carrito articulo:catalogo){
         //IMPRIMIR ARTICULOS DEL LADO IZQUIERDO
         if(izq_der){
             col_izq+="<div class=\"wrapper pad_bot1\">"
                     + " <figure class=\"left marg_right1\"><a href=\"#\"><img src=\""+articulo.articuloimagen+"\" alt=\"\"></a></figure>"
                     + "<a href=\"#\" onmouseover=\"ajax_showTooltip(window.event,'demo-pages/info_articulo.jsp?id2="+articulo.articuloCodigo+"',this);return false\" >"+articulo.articuloNombre+"</a>"
                     + "<p><strong>Precio:<strong> "+articulo.articuloPrecio+"</p>"
                     + "</div><br><br>";
             izq_der=false;
         }
         //IMPRIMIR ARTICULOS DEL LADO DERECHO
                 else{
             col_der+="<div class=\"wrapper pad_bot1\">"
                     + " <figure class=\"left marg_right1\"><a href=\"#\"><img src=\""+articulo.articuloimagen+"\" alt=\"\"></a></figure>"
                     + "<a href=\"#\" onmouseover=\"ajax_showTooltip(window.event,'demo-pages/info_articulo.jsp?id2="+articulo.articuloCodigo+"',this);return false\" >"+articulo.articuloNombre+"</a>"
                     + "<p><strong>Precio:<strong> "+articulo.articuloPrecio+"</p>"
                     + "</div><br><br>";
            izq_der=true;
         }

          
      }
         
         col_izq+="</article>";
         col_der+="</article>";
         out.print(col_izq);
         out.print(col_der);

        %>
       
      </section>
      <!--content end-->
    </div>
    <div class="block"></div>
  </div>
</div>
  <div class="main">  
  <!--footer -->
  <footer>
    <ul class="icons">
      <li>Análisis y Diseño de Sistemas 2 (Proyecto de Clase)</li>
      <li><a href="#" class="normaltip"><img src="images/icon1.jpg" alt=""></a></li>
      <li><a href="#" class="normaltip"><img src="images/icon2.jpg" alt=""></a></li>
      <li><a href="#" class="normaltip"><img src="images/icon3.jpg" alt=""></a></li>
      <li><a href="#" class="normaltip"><img src="images/icon4.jpg" alt=""></a></li>
      <li><a href="#" class="normaltip"><img src="images/icon5.jpg" alt=""></a></li>
      <li><a href="#" class="normaltip"><img src="images/icon6.jpg" alt=""></a></li>
    </ul>
  </footer>
  <!--footer end-->
</div>    
</body>
</html>
